// app/[id]/page.tsx
import { getBlogArticleById, getCategories } from "@/lib/api";
import CategoryTag from "@/components/CategoryTag";

interface BlogDetailProps {
  params: { id: string };
}

export default async function BlogDetail({ params }: BlogDetailProps) {
  const { id } = await params;
  const [article, categories] = await Promise.all([
    getBlogArticleById(id),
    getCategories(100, 1),
  ]);
  const category = categories.find((cat) => cat.id === article.categoryId);

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">{article.title}</h1>
      <div className="mb-4">
        {category && <CategoryTag name={category.name} />}
      </div>
      <div className="prose max-w-none">
        <p>{article.content}</p>
      </div>
    </div>
  );
}
